<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<image src="/static/images/user-back.jpg" mode="widthFix"
			style="position: absolute; width: 100%;left: 0;top: 0;"></image>
		<view class="user">
			<view class='header acea-row row-between-wrapper'>
				<view class="acea-row row-middle">
					<view class='pictrue' bindtap="chamgs">
						<image :src='imageUrl+userInfo.head_image'></image>
					</view>
					<view class='name' bindtap="chamgs">
						{{userInfo.staff_name}} <text>{{userInfo.rank_name}}陪诊师</text>
					</view>
				</view>
				<navigator
					:url="'/pages/user/user_info?avatar='+imageUrl+userInfo.head_image+'&nickname='+userInfo.staff_name"
					class="acea-row row-middle">
					<text class="iconfont icon-shezhixitongshezhigongnengshezhishuxing-xian"></text> 设置
				</navigator>
			</view>
			<view class='nav acea-row row-middle'>
				<navigator class='item' url="/pages/accompanying/order_list" hover-class="none">
					<view class='num'>{{userInfo.order_num}}</view>
					<view class="title">我的订单</view>
					<view class="num-tips" v-if="userInfo.staff_order_num > 0"> {{userInfo.staff_order_num}} </view>
				</navigator>
				<navigator class='item' :url="'/pages/accompanying/evaluate_list?id='+userInfo.id">
					<view class='num'>{{userInfo.comprehensive_score}}</view>
					<view class="title">综合评分</view>
				</navigator>
				<navigator class='item' :url="'/pages/accompanying/pzs_commission?commission='+userInfo.money"
					hover-class="none">
					<view class='num'>{{userInfo.money}}</view>
					<view class="title">我的收益</view>
				</navigator>
			</view>
			<view class='box myOrder'>
				<view class='title-line acea-row row-between-wrapper'>
					<view class="title-tip">我的订单</view>
					<navigator class='allOrder acea-row row-middle' url="/pages/accompanying/order_list">
						查看全部<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
					</navigator>
				</view>
				<view class='acea-row row-between-wrapper'>
					<block v-for="(item,index) in order_list " :key="index">
						<navigator class='item' :url="'/pages/accompanying/order_list?status='+item.status">
							<view class='pictrue acea-row row-center-wrapper'>
								<image :src='item.pic' mode="widthFix"></image>
							</view>
							<view class="title">{{item.title}}</view>
						</navigator>
					</block>
				</view>
			</view>
			<view class="box">
				<navigator class="line acea-row row-between-wrapper"
					:url="'/pages/accompanying/schedule?schedule='+JSON.stringify(userInfo.schedule)+'&free='+JSON.stringify(userInfo.free)">
					<!-- <navigator class="line acea-row row-between-wrapper"
					:url="'/pages/accompanying/schedule?schedule='+[]+'&free='+[]"> -->
					<view class="acea-row row-middle">
						<text class="iconfont icon-richeng"></text>
						<view class="title">日程管理</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</navigator>
				<navigator class="line acea-row row-between-wrapper"
					:url="'/pages/accompanying/public_schedule?free='+JSON.stringify(userInfo.free)">
					<view class="acea-row row-middle">
						<text class="iconfont icon-richeng1"></text>
						<view class="title">公益日程管理</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</navigator>
				<navigator class="line acea-row row-between-wrapper"
					:url="'/pages/accompanying/pzs_commission?commission='+userInfo.money">
					<view class="acea-row row-middle">
						<text class="iconfont icon-mianfeitixian"></text>
						<view class="title">我要提现</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</navigator>
				<navigator class="line acea-row row-between-wrapper"
					:url="'/pages/accompanying/qualifications?true_name='+userInfo.true_name+'&work_year='+userInfo.work_year+'&medical_background='+userInfo.medical_background">
					<view class="acea-row row-middle">
						<text class="iconfont icon-zhengshuzizhi"></text>
						<view class="title">我的资质</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</navigator>
				<navigator class="line acea-row row-between-wrapper" url="/pages/accompanying/video_list">
					<view class="acea-row row-middle">
						<text class="iconfont icon-kecheng"></text>
						<view class="title">我的课程</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</navigator>
				<navigator class="line acea-row row-between-wrapper" url="/pages/accompanying/public_welfare">
					<view class="acea-row row-middle">
						<text class="iconfont icon-gongyizhongxin"></text>
						<view class="title">公益陪诊记录</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</navigator>
				<navigator class="line acea-row row-between-wrapper"
					:url="'/pages/accompanying/story_list?id='+userInfo.id">
					<view class="acea-row row-middle">
						<text class="iconfont icon-love"></text>
						<view class="title">公益陪诊故事</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</navigator>
				<navigator class="line acea-row row-between-wrapper"
					:url="'/pages/accompanying/evaluate_list?id='+userInfo.id">
					<view class="acea-row row-middle">
						<text class="iconfont icon-pingjia-tianchong"></text>
						<view class="title">用户评价</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</navigator>
				<button open-type="contact" class="line acea-row row-between-wrapper">
					<view class="acea-row row-middle">
						<text class="iconfont icon-10"></text>
						<view class="title">联系客服</view>
					</view>
					<u-icon name="arrow-right" color="#9C9C9C"></u-icon>
				</button>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '陪诊师中心',
					'color': true,
					'class': 'user'
				},
				imageUrl: this.imageUrl,
				userInfo: {
					avatar: "/static/images/user.jpg",
					nickname: '可达鸭'
				},
				navList: [{
					path: '',
					title: '我的订单',
					num: '4',
				}, {
					path: '',
					title: '优惠券',
					num: '2',
				}, {
					path: '',
					title: '我的佣金',
					num: '95.50',
				}],
				order_list: [{
					status: 0,
					pic: '/static/images/order1.png',
					title: '待支付'
				}, {
					status: 1,
					pic: '/static/images/order2.png',
					title: '已支付'
				}, {
					status: 2,
					pic: '/static/images/order3.png',
					title: '已完成'
				}, {
					status: 3,
					pic: '/static/images/order4.png',
					title: '待评论'
				}, ]
			};
		},
		onLoad() {},
		onShow() {
			this.info();
		},
		methods: {
			async info() {
				const res = await this.$myRequest({
					url: '/api/manage/staffInfo',
					data: {
						openid: uni.getStorageSync('openid')
					}
				})
				this.userInfo = res.data.data;
			},

		}
	}
</script>

<style lang="scss">
	.wap {
		padding: 0 30rpx;
		position: relative;
		background-color: #F6F6F6;
		min-height: 100vh;
	}

	.user {
		position: relative;
		z-index: 2;
	}

	.user .header {
		color: #000406;
		width: 100%;
	}

	.user .header .pictrue {
		width: 100rpx;
		height: 100rpx;
	}

	.user .header .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2px solid #fff;
		box-sizing: border-box;
	}

	.user .header .name {
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	.user .header .name text {
		font-size: 24rpx;
		padding: 4rpx 10rpx;
		color: #fff;
		margin-left: 10rpx;
		border-radius: 6rpx;
		background: #FE8802;
	}

	.user .header .iconfont {
		font-size: 32rpx;
		margin-right: 10rpx;
	}

	.nav {
		padding: 30rpx 0;
	}

	.nav .item {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #000406;
		position: relative;
	}

	.nav .item .num {
		font-size: 32rpx;
		padding-bottom: 20rpx;
	}

	.nav .item .num-tips {
		padding: 0 12rpx;
		height: 30rpx;
		background: #FE8802;
		border-radius: 20rpx;
		margin-left: 20rpx;
		color: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
		display: inline-block;
		position: absolute;
		right: 40rpx;
		top: 0;
	}


	.box {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.myOrder .title-line {
		margin-bottom: 20rpx;
	}

	.myOrder .title-line .allOrder {
		color: #9C9C9C;
	}

	.myOrder .item {
		width: 20%;
		text-align: center;
	}

	.myOrder .item .pictrue {
		height: 80rpx;
	}

	.myOrder .item .pictrue image {
		width: 50rpx;
	}

	.line {
		height: 100rpx;
		border-bottom: 1px solid #F2F2F2;
		font-size: 28rpx;
	}

	.line .iconfont {
		width: 36rpx;
		margin-right: 20rpx;
		color: #1F83FF;
		font-size: 36rpx;
		text-align: center;
	}

	.line .num {
		padding: 0 12rpx;
		height: 30rpx;
		background: #FE8802;
		border-radius: 20rpx;
		margin-left: 20rpx;
		color: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}
</style>
